<template>
    <footer>
        <ul>
            <router-link tag="li" to="shouye">
                <img :src="hoom" alt=""><br/>{{shou}}
            </router-link>
            <router-link tag="li" to="list">
                <img :src="juan" alt=""><br/>{{zhao}}
            </router-link>
            <router-link tag="li" to="shop">
                <img :src="gwcs" alt=""><br/>{{gwc}}
            </router-link>
            <router-link tag="li" to="profile">
                <img :src="wd" alt=""><br/>{{wode}}
            </router-link>
        </ul>
    </footer>
</template>
<script>
export default {
  data () {
    return {
      shou: '首页',
      zhao: '找卷',
      gwc: '购物车',
      wode: '我的',
      hoom: require('../../static/imgs/hoome1.png'),
      juan: require('../../static/imgs/zn.png'),
      gwcs: require('../../static/imgs/gwc1.png'),
      wd: require('../../static/imgs/wd.png')
    }
  },
  components: {

  }
}
</script>

<style scoped>
footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#fff;
    border-top:1px solid #ccc;
}
ul{
    display:flex;
}
li{
    flex:1;
    margin-top:3%;
}
img{
    width:25%;
}
</style>
